CSS Houdini லேஅவுட் API: தனிப்பயன் லேஅவுட் அல்காரிதம் மேம்பாட்டில் ஒரு ஆழமான பார்வை

இணையம் தொடர்ந்து வளர்ந்து வருகிறது, அதனுடன், வலை உருவாக்குநர்கள் மேலும் சிக்கலான மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய பயனர் இடைமுகங்களை உருவாக்க வேண்டிய தேவைகளும் அதிகரித்து வருகின்றன. பாரம்பரிய CSS லேஅவுட் முறைகள் சக்திவாய்ந்ததாக இருந்தாலும், உண்மையிலேயே தனித்துவமான மற்றும் செயல்திறன் மிக்க வடிவமைப்புகளை அடைய முயற்சிக்கும்போது சில சமயங்களில் அவை கட்டுப்படுத்துவதாக உணரப்படலாம். இங்குதான் CSS Houdini-இன் லேஅவுட் API வருகிறது, இது லேஅவுட் அல்காரிதம் மேம்பாட்டிற்கு ஒரு புரட்சிகரமான அணுகுமுறையை வழங்குகிறது.

CSS Houdini என்றால் என்ன?

CSS Houdini என்பது CSS ரெண்டரிங் இன்ஜினின் பகுதிகளை உருவாக்குநர்களுக்கு வெளிப்படுத்தும் குறைந்த-நிலை API-களின் ஒரு தொகுப்பிற்கான பொதுவான சொல் ஆகும். இது வலைப் பக்கங்களின் ஸ்டைலிங் மற்றும் லேஅவுட் மீது முன்னெப்போதும் இல்லாத கட்டுப்பாட்டை அனுமதிக்கிறது. உலாவியின் உள்ளமைக்கப்பட்ட ரெண்டரிங் இன்ஜினை மட்டுமே சார்ந்திருப்பதற்குப் பதிலாக, ஹுடினி உருவாக்குநர்களுக்கு தனிப்பயன் குறியீட்டைக் கொண்டு அதை நீட்டிக்க அதிகாரம் அளிக்கிறது. இதை உலாவியின் ஸ்டைலிங் மற்றும் ரெண்டரிங் செயல்முறைக்குள் இருக்கும் "கொக்கிகள்" தொகுப்பாக நினையுங்கள்.

முக்கிய ஹுடினி API-கள் பின்வருமாறு:

• CSS பார்சர் API: CSS போன்ற தொடரியலை பாகுபடுத்தி, தனிப்பயன் பண்புகளை உருவாக்க உங்களை அனுமதிக்கிறது.
• CSS பிராப்பர்டீஸ் மற்றும் வேல்யூஸ் API: குறிப்பிட்ட வகைகள் மற்றும் நடத்தைகளுடன் தனிப்பயன் CSS பண்புகளை பதிவு செய்ய உதவுகிறது.
• டைப்டு OM (ஆப்ஜெக்ட் மாடல்): CSS பண்புகளை அணுக மற்றும் கையாள மிகவும் திறமையான மற்றும் வகை-பாதுகாப்பான வழியை வழங்குகிறது.
• பெயிண்ட் API: ஜாவாஸ்கிரிப்ட் அடிப்படையிலான ரெண்டரிங்கைப் பயன்படுத்தி தனிப்பயன் பின்னணி படங்கள், பார்டர்கள் மற்றும் பிற காட்சி விளைவுகளை வரையறுக்க உங்களை அனுமதிக்கிறது.
• அனிமேஷன் API: CSS அனிமேஷன்கள் மற்றும் மாற்றங்கள் மீது சிறந்த கட்டுப்பாட்டை வழங்குகிறது.
• லேஅவுட் API: இந்த கட்டுரையின் மையப்பொருள், இது தனிப்பயன் லேஅவுட் அல்காரிதம்களை வரையறுக்க உங்களை அனுமதிக்கிறது.
• வொர்க்லெட்டுகள்: உலாவியின் ரெண்டரிங் பைப்லைனில் இயங்கும் ஒரு இலகுரக ஜாவாஸ்கிரிப்ட் செயல்படுத்தும் சூழல். ஹுடினி API-கள் வொர்க்லெட்டுகளை பெரிதும் சார்ந்துள்ளன.

லேஅவுட் API-ஐ அறிமுகப்படுத்துதல்

லேஅவுட் API என்பது CSS ஹுடினியின் மிகவும் உற்சாகமான பகுதிகளில் ஒன்றாகும். இது உருவாக்குநர்களுக்கு ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி தங்கள் சொந்த லேஅவுட் அல்காரிதம்களை வரையறுக்க உதவுகிறது, அடிப்படையில் ஒரு பக்கத்தில் உள்ள குறிப்பிட்ட கூறுகளுக்கான உலாவியின் இயல்புநிலை லேஅவுட் இன்ஜினை மாற்றியமைக்கிறது. இது பாரம்பரிய CSS மூலம் முன்பு சாத்தியமற்றதாக அல்லது மிகவும் கடினமாக இருந்த புதுமையான மற்றும் மிகவும் தனிப்பயனாக்கப்பட்ட லேஅவுட்களை உருவாக்குவதற்கான ஒரு உலகத்தைத் திறக்கிறது.

ஒரு சுழல்வடிவில் தானாகவே கூறுகளை வரிசைப்படுத்தும் ஒரு லேஅவுட்டை உருவாக்குவதை கற்பனை செய்து பாருங்கள், அல்லது உள்ளடக்க அளவின் அடிப்படையில் மாறும் நெடுவரிசை அகலங்களுடன் ஒரு மேசன்ரி கிரிட், அல்லது ஒரு குறிப்பிட்ட தரவு காட்சிப்படுத்தலுக்கு ஏற்ப முற்றிலும் ஒரு புதிய லேஅவுட். லேஅவுட் API இந்த காட்சிகளை реальноக்குகிறது.

லேஅவுட் API-ஐ ஏன் பயன்படுத்த வேண்டும்?

லேஅவுட் API-ஐப் பயன்படுத்துவதைக் கருத்தில் கொள்ள சில முக்கிய காரணங்கள் இங்கே:

• முன்னெப்போதும் இல்லாத லேஅவுட் கட்டுப்பாடு: ஒரு கண்டெய்னருக்குள் கூறுகள் எவ்வாறு நிலைநிறுத்தப்படுகின்றன மற்றும் அளவிடப்படுகின்றன என்பதில் முழுமையான கட்டுப்பாட்டைப் பெறுங்கள்.
• செயல்திறன் மேம்படுத்தல்: உங்கள் பயன்பாட்டின் குறிப்பிட்ட தேவைகளுக்கு லேஅவுட் அல்காரிதத்தை வடிவமைப்பதன் மூலம் லேஅவுட் செயல்திறனை மேம்படுத்தலாம். எடுத்துக்காட்டாக, குறிப்பிட்ட உள்ளடக்க பண்புகளைப் பயன்படுத்தும் மேம்படுத்தல்களை நீங்கள் செயல்படுத்தலாம்.
• குறுக்கு-உலாவி நிலைத்தன்மை: ஹுடினி இந்த விவரக்குறிப்பை ஆதரிக்கும் வெவ்வேறு உலாவிகளில் ஒரு நிலையான அனுபவத்தை வழங்குவதை நோக்கமாகக் கொண்டுள்ளது. உலாவி ஆதரவு இன்னும் வளர்ந்து வரும் நிலையில், இது மிகவும் நம்பகமான மற்றும் கணிக்கக்கூடிய லேஅவுட் சூழலின் வாக்குறுதியை வழங்குகிறது.
• கூறுபடுத்துதல் மற்றும் மறுபயன்பாடு: சிக்கலான லேஅவுட் தர்க்கத்தை திட்டங்கள் முழுவதும் எளிதாகப் பகிரக்கூடிய மறுபயன்பாட்டு கூறுகளில் இணைத்தல்.
• சோதனை மற்றும் புதுமை: வலை வடிவமைப்பின் எல்லைகளைத் தள்ளி, புதிய மற்றும் வழக்கத்திற்கு மாறான லேஅவுட் வடிவங்களை ஆராயுங்கள்.

லேஅவுட் API எவ்வாறு செயல்படுகிறது: ஒரு படிப்படியான வழிகாட்டி

லேஅவுட் API-ஐப் பயன்படுத்துவதில் பல முக்கிய படிகள் உள்ளன:

1. ஒரு லேஅவுட் வொர்க்லெட்டை வரையறுக்கவும்: தனிப்பயன் லேஅவுட் அல்காரிதத்தைக் கொண்ட ஒரு ஜாவாஸ்கிரிப்ட் கோப்பை ( "லேஅவுட் வொர்க்லெட்" ) உருவாக்கவும். இந்த கோப்பு ஒரு தனி திரெட்டில் செயல்படுத்தப்படும், இது பிரதான உலாவி திரெட்டைத் தடுக்காது என்பதை உறுதி செய்கிறது.
2. லேஅவுட் வொர்க்லெட்டை பதிவு செய்யவும்: உலாவியுடன் லேஅவுட் வொர்க்லெட்டைப் பதிவு செய்ய `CSS.layoutWorklet.addModule()` முறையைப் பயன்படுத்தவும். இது உங்கள் தனிப்பயன் லேஅவுட் அல்காரிதம் கிடைக்கிறது என்பதை உலாவிக்குத் தெரிவிக்கிறது.
3. `layout()` செயல்பாட்டைச் செயல்படுத்தவும்: லேஅவுட் வொர்க்லெட்டிற்குள், ஒரு `layout()` செயல்பாட்டை வரையறுக்கவும். இந்த செயல்பாடு உங்கள் தனிப்பயன் லேஅவுட் அல்காரிதத்தின் இதயம். இது லேஅவுட் செய்யப்படும் உறுப்பு பற்றிய தகவல்களைப் பெறுகிறது (எ.கா., கிடைக்கும் இடம், உள்ளடக்க அளவு, தனிப்பயன் பண்புகள்) மற்றும் உறுப்பின் குழந்தைகளின் நிலை மற்றும் அளவு பற்றிய தகவல்களைத் திருப்புகிறது.
4. தனிப்பயன் பண்புகளை பதிவு செய்யவும் (விரும்பினால்): உங்கள் லேஅவுட் அல்காரிதம் பயன்படுத்தும் எந்தவொரு தனிப்பயன் CSS பண்புகளையும் பதிவு செய்ய `CSS.registerProperty()` முறையைப் பயன்படுத்தவும். இது CSS ஸ்டைல்கள் மூலம் லேஅவுட்டின் நடத்தையைக் கட்டுப்படுத்த உங்களை அனுமதிக்கிறது.
5. லேஅவுட்டைப் பயன்படுத்தவும்: உங்கள் தனிப்பயன் லேஅவுட் அல்காரிதத்தை ஒரு உறுப்புக்குப் பயன்படுத்த `layout:` CSS பண்பைப் பயன்படுத்தவும். பதிவு செய்யும் போது நீங்கள் லேஅவுட் அல்காரிதத்திற்கு வழங்கிய பெயரை நீங்கள் குறிப்பிடுகிறீர்கள்.

படிகளின் விரிவான முறிவு

1. ஒரு லேஅவுட் வொர்க்லெட்டை வரையறுக்கவும்

லேஅவுட் வொர்க்லெட் என்பது தனிப்பயன் லேஅவுட் அல்காரிதத்தைக் கொண்ட ஒரு ஜாவாஸ்கிரிப்ட் கோப்பு ஆகும். இது ஒரு தனி திரெட்டில் செயல்படுத்தப்படுகிறது, இது செயல்திறனுக்கு முக்கியமானது. `spiral-layout.js` என்ற ஒரு எளிய உதாரணத்தை உருவாக்குவோம்:

```javascript
// spiral-layout.js
registerLayout('spiral-layout', class {
  static get inputProperties() { return ['--spiral-turns', '--spiral-growth']; }

  async layout(children, edges, constraints, styleMap) {
    const turnCount = parseFloat(styleMap.get('--spiral-turns').value) || 5;
    const growthFactor = parseFloat(styleMap.get('--spiral-growth').value) || 20;

    const childCount = children.length;
    const centerX = constraints.inlineSize / 2;
    const centerY = constraints.blockSize / 2;

    for (let i = 0; i < childCount; i++) {
      const child = children[i];
      const angle = (i / childCount) * turnCount * 2 * Math.PI;
      const radius = growthFactor * i;

      const x = centerX + radius * Math.cos(angle) - child.inlineSize / 2;
      const y = centerY + radius * Math.sin(angle) - child.blockSize / 2;

      child.styleMap.set('top', y + 'px');
      child.styleMap.set('left', x + 'px');
    }

    return { blockSizes: [constraints.blockSize] };
  }
});
```

விளக்கம்:

• `registerLayout('spiral-layout', class { ... })`: இந்த வரி லேஅவுட் அல்காரிதத்தை `spiral-layout` என்ற பெயரில் பதிவு செய்கிறது. இந்த பெயரைத்தான் உங்கள் CSS-இல் பயன்படுத்துவீர்கள்.
• `static get inputProperties() { return ['--spiral-turns', '--spiral-growth']; }`: இது லேஅவுட் அல்காரிதம் பயன்படுத்தும் தனிப்பயன் CSS பண்புகளை வரையறுக்கிறது. இந்த வழக்கில், `--spiral-turns` சுழலின் திருப்பங்களின் எண்ணிக்கையைக் கட்டுப்படுத்துகிறது, மற்றும் `--spiral-growth` சுழல் எவ்வளவு வேகமாக வெளிப்புறமாக வளர்கிறது என்பதைக் கட்டுப்படுத்துகிறது.
• `async layout(children, edges, constraints, styleMap) { ... }`: இது லேஅவுட் அல்காரிதத்தின் மையப்பகுதி. இது பின்வரும் வாதங்களை எடுக்கிறது:
  • `children`: `LayoutChild` பொருட்களின் ஒரு வரிசை, இது லேஅவுட் செய்யப்படும் உறுப்பின் குழந்தைகளைக் குறிக்கிறது.
  • `edges`: உறுப்பின் விளிம்புகள் பற்றிய தகவல்களைக் கொண்ட ஒரு பொருள்.
  • `constraints`: கிடைக்கும் இடம் பற்றிய தகவல்களைக் கொண்ட ஒரு பொருள் (எ.கா., `inlineSize` மற்றும் `blockSize`).
  • `styleMap`: ஒரு `StylePropertyMapReadOnly` பொருள், இது நீங்கள் பதிவுசெய்த தனிப்பயன் பண்புகள் உட்பட CSS பண்புகளின் கணக்கிடப்பட்ட மதிப்புகளை அணுக உங்களை அனுமதிக்கிறது.
• `layout()` செயல்பாட்டிற்குள் உள்ள குறியீடு ஒவ்வொரு குழந்தையின் நிலையையும் சுழல் அல்காரிதத்தின் அடிப்படையில் கணக்கிடுகிறது. இது சுழலின் வடிவத்தைக் கட்டுப்படுத்த `turnCount` மற்றும் `growthFactor` பண்புகளைப் பயன்படுத்துகிறது.
• `child.styleMap.set('top', y + 'px'); child.styleMap.set('left', x + 'px');`: இது ஒவ்வொரு குழந்தை உறுப்பின் `top` மற்றும் `left` ஸ்டைல்களை அமைக்கிறது, திறம்பட அவற்றை சுழலுக்குள் நிலைநிறுத்துகிறது.
• `return { blockSizes: [constraints.blockSize] };`: இது உறுப்பின் பிளாக் அளவுகளைக் கொண்ட ஒரு பொருளைத் திருப்புகிறது. இந்த வழக்கில், நாங்கள் கிடைக்கும் பிளாக் அளவை வெறுமனே திருப்புகிறோம், ஆனால் தேவைப்பட்டால் நீங்கள் வெவ்வேறு பிளாக் அளவுகளைக் கணக்கிட்டுத் திருப்பலாம்.

2. லேஅவுட் வொர்க்லெட்டை பதிவு செய்யவும்

நீங்கள் தனிப்பயன் லேஅவுட்டைப் பயன்படுத்துவதற்கு முன்பு, நீங்கள் லேஅவுட் வொர்க்லெட்டை உலாவியுடன் பதிவு செய்ய வேண்டும். இதை `CSS.layoutWorklet.addModule()` முறையைப் பயன்படுத்தி செய்யலாம். இது பொதுவாக ஒரு தனி ஜாவாஸ்கிரிப்ட் கோப்பில் அல்லது உங்கள் HTML-இல் உள்ள `

```

விளக்கம்:

• `layout: spiral-layout;`: இது `.spiral-container` உறுப்புக்கு `spiral-layout` அல்காரிதத்தைப் பயன்படுத்துகிறது.
• `--spiral-turns: 8;`: `--spiral-turns` தனிப்பயன் பண்பின் மதிப்பை 8 ஆக அமைக்கிறது.
• `--spiral-growth: 30;`: `--spiral-growth` தனிப்பயன் பண்பின் மதிப்பை 30 ஆக அமைக்கிறது.
• `position: relative;`: இது முக்கியமானது, ஏனெனில் கண்டெய்னரின் குழந்தைகள் முழுமையாக நிலைநிறுத்தப்படும்.
• `position: absolute;`: இது spiral-container இன் *குழந்தைகளுக்கு* மிக முக்கியமானது. லேஅவுட் API `top` மற்றும் `left` பண்புகளை அமைக்கிறது, இது முழுமையான நிலைப்படுத்தலுடன் மட்டுமே வேலை செய்யும்.

மேம்பட்ட கருத்துக்கள் மற்றும் பரிசீலனைகள்

செயல்திறன் மேம்படுத்தல்

லேஅவுட் API செயல்திறனை மேம்படுத்தக்கூடியதாக இருந்தாலும், உங்கள் தனிப்பயன் லேஅவுட் அல்காரிதங்களின் செயல்திறன் தாக்கங்கள் குறித்து கவனமாக இருப்பது முக்கியம். சிக்கலான கணக்கீடுகள் அல்லது திறமையற்ற குறியீடு ஹுடினியைப் பயன்படுத்துவதன் நன்மைகளை ரத்து செய்யலாம்.

செயல்திறனை மேம்படுத்துவதற்கான சில குறிப்புகள் இங்கே:

• கணக்கீடுகளைக் குறைத்தல்: `layout()` செயல்பாட்டிற்குள் தேவையற்ற கணக்கீடுகள் அல்லது DOM கையாளுதல்களைத் தவிர்க்கவும்.
• முடிவுகளை தற்காலிகமாக சேமித்தல்: ஒவ்வொரு லேஅவுட் சுழற்சியிலும் அவற்றை மீண்டும் கணக்கிடுவதைத் தவிர்க்க அடிக்கடி பயன்படுத்தப்படும் மதிப்புகளை தற்காலிகமாக சேமிக்கவும்.
• திறமையான தரவு கட்டமைப்புகளைப் பயன்படுத்துங்கள்: தரவைச் சேமிப்பதற்கும் அணுகுவதற்கும் பொருத்தமான தரவு கட்டமைப்புகளை (எ.கா., வரிசைகள், வரைபடங்கள்) தேர்வு செய்யவும்.
• உங்கள் குறியீட்டை சுயவிவரப்படுத்துங்கள்: உங்கள் குறியீட்டை சுயவிவரப்படுத்தவும் மற்றும் செயல்திறன் தடைகளை அடையாளம் காணவும் உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும்.
• பிரதான திரெட்டைத் தடுப்பதைத் தவிர்க்கவும்: லேஅவுட் வொர்க்லெட் ஒரு தனி திரெட்டில் இயங்குகிறது, ஆனால் நீங்கள் இன்னும் `layout()` செயல்பாட்டிற்குள் நீண்ட நேரம் இயங்கும் அல்லது தடுக்கும் செயல்பாடுகளைச் செய்வதைத் தவிர்க்க வேண்டும்.

பிழைதிருத்தம்

லேஅவுட் வொர்க்லெட்டுகளை பிழைதிருத்தம் செய்வது சவாலானது, ஏனெனில் அவை ஒரு தனி திரெட்டில் இயங்குகின்றன. இருப்பினும், பெரும்பாலான நவீன உலாவிகள் குறியீட்டை ஆய்வு செய்யவும் மற்றும் வரி வரியாகச் செல்லவும் உங்களை அனுமதிக்கும் பிழைதிருத்தக் கருவிகளை வழங்குகின்றன.

லேஅவுட் வொர்க்லெட்டுகளை பிழைதிருத்தம் செய்வதற்கான சில குறிப்புகள் இங்கே:

• `console.log()` ஐப் பயன்படுத்தவும்: உலாவி கன்சோலுக்கு தகவல்களைப் பதிவு செய்ய `console.log()` அறிக்கைகளைப் பயன்படுத்தவும். இது செயலாக்கத்தின் ஓட்டத்தைப் புரிந்துகொள்ளவும் மற்றும் சாத்தியமான பிழைகளை அடையாளம் காணவும் உங்களுக்கு உதவும்.
• பிரேக் பாயிண்ட்களைப் பயன்படுத்தவும்: உலாவியின் டெவலப்பர் கருவிகளைப் பயன்படுத்தி உங்கள் குறியீட்டில் பிரேக் பாயிண்ட்களை அமைக்கவும். இது செயலாக்கத்தை இடைநிறுத்தவும் மற்றும் மாறிகளின் மதிப்புகளை ஆய்வு செய்யவும் உங்களை அனுமதிக்கிறது.
• `debugger` அறிக்கையைப் பயன்படுத்தவும்: ஒரு பிரேக் பாயிண்ட்டைத் தூண்டுவதற்கு உங்கள் குறியீட்டில் `debugger` அறிக்கையைச் செருகவும்.
• கன்சோலில் பிழைகளைச் சரிபார்க்கவும்: உலாவி கன்சோலில் தோன்றும் எந்தவொரு பிழை செய்திகளுக்கும் கவனம் செலுத்துங்கள். இந்த செய்திகள் சிக்கலின் காரணம் பற்றிய மதிப்புமிக்க தடயங்களை வழங்கக்கூடும்.

உலாவி ஆதரவு

CSS ஹுடினிக்கான உலாவி ஆதரவு இன்னும் வளர்ந்து வருகிறது. 2024 இன் பிற்பகுதியில், Chrome மற்றும் Edge மிகவும் விரிவான ஆதரவை வழங்குகின்றன. Firefox மற்றும் Safari ஹுடினி API-களைச் செயல்படுத்துவதில் தீவிரமாகச் செயல்பட்டு வருகின்றன.

is Houdini ready yet? போன்ற வலைத்தளங்களில் உலாவி ஆதரவின் தற்போதைய நிலையை நீங்கள் சரிபார்க்கலாம். லேஅவுட் API-ஐ ஆதரிக்காத உலாவிகளில் உங்கள் குறியீடு நளினமாகக் குறைவதை உறுதிப்படுத்த அம்சக் கண்டறிதலைப் பயன்படுத்துவது அவசியம்.

ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி அம்சக் கண்டறிதலுக்கான ஒரு எடுத்துக்காட்டு இங்கே:

```javascript
if ('layoutWorklet' in CSS) {
  // லேஅவுட் API ஆதரிக்கப்படுகிறது
  CSS.layoutWorklet.addModule('spiral-layout.js');
} else {
  // லேஅவுட் API ஆதரிக்கப்படவில்லை
  // ஒரு பின்னடைவு தீர்வை வழங்கவும்
  console.warn('இந்த உலாவியில் லேஅவுட் API ஆதரிக்கப்படவில்லை.');
  // எடுத்துக்காட்டு பின்னடைவு: கூறுகளை ஒரு எளிய பட்டியலில் காண்பி
  const container = document.querySelector('.spiral-container');
  if (container) {
    container.style.display = 'block'; // அல்லது 'flex', 'grid', போன்றவை., விரும்பிய பின்னடைவு லேஅவுட்டைப் பொறுத்து
  }
}
```

அணுகல்தன்மை பரிசீலனைகள்

லேஅவுட் API உடன் தனிப்பயன் லேஅவுட்களை உருவாக்கும்போது, அணுகல்தன்மையைக் கருத்தில் கொள்வது முக்கியம். உங்கள் லேஅவுட்கள் மாற்றுத்திறனாளிகளுக்குப் பயன்படுத்தக்கூடியதாகவும் அணுகக்கூடியதாகவும் இருப்பதை உறுதிப்படுத்தவும்.

சில அணுகல்தன்மை பரிசீலனைகள் இங்கே:

• சொற்பொருள் HTML: உங்கள் உள்ளடக்கத்திற்கு கட்டமைப்பையும் அர்த்தத்தையும் வழங்க சொற்பொருள் HTML கூறுகளைப் பயன்படுத்தவும். இது ஸ்கிரீன் ரீடர்கள் மற்றும் பிற உதவித் தொழில்நுட்பங்கள் உள்ளடக்கத்தைப் புரிந்துகொள்ள உதவுகிறது.
• விசைப்பலகை வழிசெலுத்தல்: அனைத்து ஊடாடும் கூறுகளையும் விசைப்பலகையைப் பயன்படுத்தி அணுகவும் இயக்கவும் முடியும் என்பதை உறுதிப்படுத்தவும்.
• கவன மேலாண்மை: பயனர்கள் பக்கத்தை ஒரு தர்க்கரீதியான மற்றும் கணிக்கக்கூடிய வழியில் வழிநடத்த முடியும் என்பதை உறுதிப்படுத்த கவன வரிசையை நிர்வகிக்கவும்.
• வண்ண வேறுபாடு: பார்வை குறைபாடு உள்ளவர்களுக்கு உரை படிக்கக்கூடியதாக இருப்பதை உறுதிப்படுத்த போதுமான வண்ண வேறுபாட்டைப் பயன்படுத்தவும்.
• ARIA பண்புக்கூறுகள்: கூறுகளின் பங்கு, நிலை மற்றும் பண்புகள் பற்றிய கூடுதல் தகவல்களை வழங்க ARIA பண்புக்கூறுகளைப் பயன்படுத்தவும்.

சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (L10n)

உலகளாவிய பார்வையாளர்களுக்காக வலைப் பயன்பாடுகளை உருவாக்கும்போது, சர்வதேசமயமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (L10n) ஆகியவற்றைக் கருத்தில் கொள்வது முக்கியம். லேஅவுட் API வெவ்வேறு மொழிகள் மற்றும் கலாச்சாரங்களுக்கு லேஅவுட்களை மாற்றியமைப்பதில் ஒரு பங்கு வகிக்க முடியும்.

சில i18n மற்றும் L10n பரிசீலனைகள் இங்கே:

• உரை திசை: இடமிருந்து வலம் (LTR) மற்றும் வலமிருந்து இடம் (RTL) ஆகிய இரண்டு உரை திசைகளையும் ஆதரிக்கவும். உரை திசையைக் கட்டுப்படுத்த நீங்கள் `direction` CSS பண்பைப் பயன்படுத்தலாம். லேஅவுட் API உரை திசையின் அடிப்படையில் லேஅவுட்டை சரிசெய்யப் பயன்படுத்தப்படலாம். எடுத்துக்காட்டாக, RTL மொழிகளில் லேஅவுட்டை நீங்கள் பிரதிபலிக்க வேண்டியிருக்கலாம்.
• எண் வடிவமைப்பு: பயனரின் இருப்பிடத்தின் மரபுகளுக்கு ஏற்ப எண்களை வடிவமைக்கவும். எண்களை வடிவமைக்க நீங்கள் `Intl.NumberFormat` API-ஐப் பயன்படுத்தலாம்.
• தேதி மற்றும் நேர வடிவமைப்பு: பயனரின் இருப்பிடத்தின் மரபுகளுக்கு ஏற்ப தேதிகள் மற்றும் நேரங்களை வடிவமைக்கவும். தேதிகள் மற்றும் நேரங்களை வடிவமைக்க நீங்கள் `Intl.DateTimeFormat` API-ஐப் பயன்படுத்தலாம்.
• நாணய வடிவமைப்பு: பயனரின் இருப்பிடத்தின் மரபுகளுக்கு ஏற்ப நாணய மதிப்புகளை வடிவமைக்கவும். நாணய மதிப்புகளை வடிவமைக்க நீங்கள் `Intl.NumberFormat` API-ஐப் பயன்படுத்தலாம்.
• மொழி-சார்ந்த லேஅவுட் சரிசெய்தல்: சில மொழிகளுக்கு குறிப்பிட்ட லேஅவுட் சரிசெய்தல் தேவைப்படலாம். எடுத்துக்காட்டாக, சில மொழிகளில் நீண்ட சொற்கள் அல்லது சொற்றொடர்கள் உள்ளன, இதற்கு அதிக இடம் தேவைப்படலாம். இந்த சரிசெய்தல்களைச் செய்ய லேஅவுட் API பயன்படுத்தப்படலாம். எடுத்துக்காட்டாக, நீங்கள் ஒரு மேசன்ரி லேஅவுட்டைப் பயன்படுத்துகிறீர்கள் என்றால், தற்போதைய மொழியில் சராசரி சொல் நீளத்தின் அடிப்படையில் நெடுவரிசை அகலங்களை சரிசெய்ய விரும்பலாம்.
• கலாச்சார பரிசீலனைகள்: லேஅவுட்டைப் பாதிக்கக்கூடிய கலாச்சார வேறுபாடுகளைப் பற்றி அறிந்திருங்கள். எடுத்துக்காட்டாக, சில கலாச்சாரங்களில், சில வண்ணங்கள் அல்லது சின்னங்கள் எதிர்மறையான அர்த்தங்களைக் கொண்டிருக்கலாம்.

எடுத்துக்காட்டு: RTL ஆதரவு

நீங்கள் இரண்டு நெடுவரிசைகளைக் கொண்ட ஒரு எளிய லேஅவுட்டைக் கவனியுங்கள்: ஒன்று படத்திற்கும் மற்றொன்று உரைக்கும். ஒரு LTR மொழியில், படம் இடதுபுறத்திலும் உரை வலதுபுறத்திலும் இருக்கலாம். ஒரு RTL மொழியில், நீங்கள் இந்த லேஅவுட்டைப் பிரதிபலிக்க விரும்புவீர்கள், இதனால் படம் வலதுபுறத்திலும் உரை இடதுபுறத்திலும் இருக்கும்.

உறுப்பின் `direction` பண்பைச் சரிபார்த்து, அதற்கேற்ப லேஅவுட்டை சரிசெய்வதன் மூலம் லேஅவுட் API ஐப் பயன்படுத்தி இதை நீங்கள் அடையலாம்:

```javascript
registerLayout('rtl-aware-layout', class {
  async layout(children, edges, constraints, styleMap) {
    const isRTL = styleMap.get('direction').value === 'rtl';

    // ... உங்கள் லேஅவுட் தர்க்கம் ...

    for (let i = 0; i < children.length; i++) {
      const child = children[i];

      let x = 0; // இயல்புநிலை LTR நிலை

      if (isRTL) {
        // RTL-க்கு நிலையை சரிசெய்யவும்
        x = constraints.inlineSize - child.inlineSize - x; // நிலையைப் பிரதிபலிக்கவும்
      }

      child.styleMap.set('left', x + 'px');
      // ... மற்ற ஸ்டைல் அமைப்புகள்
    }

    return { blockSizes: [constraints.blockSize] };
  }
});
```

பின்னர், உங்கள் CSS-இல், நீங்கள் RTL மொழிகளுக்கான `direction` பண்பை அமைக்கலாம்:

```css
.rtl-container {
  layout: rtl-aware-layout;
}

[lang="ar"] .rtl-container { /* அரபு மொழிக்கு எடுத்துக்காட்டு */
  direction: rtl;
}
```

பயன்பாட்டு வழக்குகள் மற்றும் எடுத்துக்காட்டுகள்

லேஅவுட் API பலவகையான தனிப்பயன் லேஅவுட்களை உருவாக்கப் பயன்படுத்தப்படலாம். சில எடுத்துக்காட்டுகள் இங்கே:

• மேசன்ரி கிரிட்கள்: உள்ளடக்க அளவின் அடிப்படையில் மாறுபட்ட நெடுவரிசை அகலங்களுடன் மாறும் மேசன்ரி கிரிட்களை உருவாக்கவும்.
• வட்ட லேஅவுட்கள்: கூறுகளை ஒரு வட்டத்தில் அல்லது சுழலில் வரிசைப்படுத்தவும்.
• துருவ ஒருங்கிணைப்பு லேஅவுட்கள்: துருவ ஒருங்கிணைப்புகளைப் பயன்படுத்தி (ஆரம் மற்றும் கோணம்) கூறுகளை நிலைநிறுத்தவும்.
• தரவு காட்சிப்படுத்தல் லேஅவுட்கள்: விளக்கப்படங்கள் மற்றும் வரைபடங்கள் போன்ற தரவைக் காண்பிப்பதற்காக தனிப்பயன் லேஅவுட்களை உருவாக்கவும்.
• விளையாட்டு UI லேஅவுட்கள்: வலை அடிப்படையிலான விளையாட்டுகளுக்கு தனித்துவமான மற்றும் ஊடாடும் பயனர் இடைமுகங்களை வடிவமைக்கவும்.
• பத்திரிகை பாணி லேஅவுட்கள்: பத்திரிகைகளில் காணப்படும் சிக்கலான மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய லேஅவுட்களைப் பிரதிபலிக்கவும்.
• ஏற்பு லேஅவுட்கள்: வெவ்வேறு திரை அளவுகள் மற்றும் திசைகளுக்கு தானாகவே சரிசெய்யும் லேஅவுட்களை உருவாக்கவும்.

உலகளாவிய எடுத்துக்காட்டுகள்: வெவ்வேறு கலாச்சாரங்களால் ஈர்க்கப்பட்ட லேஅவுட்கள்

உலகெங்கிலும் உள்ள வெவ்வேறு கலாச்சாரங்கள் மற்றும் வடிவமைப்பு மரபுகளால் ஈர்க்கப்பட்ட லேஅவுட்களை உருவாக்கவும் லேஅவுட் API பயன்படுத்தப்படலாம்:

• ஜப்பானிய தோட்ட லேஅவுட்: ஒரு பாரம்பரிய ஜப்பானிய தோட்டத்தில் உள்ள கூறுகளின் அமைப்பைப் பிரதிபலிக்கும் ஒரு லேஅவுட், கவனமாக வைக்கப்பட்ட பாறைகள், தாவரங்கள் மற்றும் நீர் அம்சங்களுடன். இது சீரற்ற இடைவெளி மற்றும் பார்வைக்கு சமநிலையான கலவைகளை உருவாக்க லேஅவுட் API ஐப் பயன்படுத்துவதை உள்ளடக்கியிருக்கலாம். பொன் விகிதம் மற்றும் சமச்சீரற்ற கொள்கைகள் (fukinsei) இணைக்கப்படலாம்.
• இஸ்லாமிய வடிவியல் வடிவங்கள்: இஸ்லாமிய கலை மற்றும் கட்டிடக்கலையால் ஈர்க்கப்பட்ட மீண்டும் மீண்டும் வரும் வடிவியல் வடிவங்களை உருவாக்கவும். இது சிக்கலான ஓடுகள் மற்றும் சமச்சீரான வடிவமைப்புகளை உருவாக்க கூறுகளை துல்லியமாக நிலைநிறுத்த லேஅவுட் API ஐப் பயன்படுத்துவதை உள்ளடக்கியிருக்கலாம்.
• ஆப்பிரிக்க ஜவுளி-ஈர்க்கப்பட்ட லேஅவுட்கள்: கெண்டே துணி அல்லது அடிர் துணி போன்ற ஆப்பிரிக்க ஜவுளிகளில் காணப்படும் தைரியமான வண்ணங்கள் மற்றும் வடிவங்களின் அடிப்படையில் லேஅவுட்களை உருவாக்கவும். இது இந்த துணிகளின் காட்சி தாளங்களைப் பிரதிபலிக்க உறுப்பு அளவுகள் மற்றும் நிலைகளை மாறும் வகையில் சரிசெய்வதை உள்ளடக்கியிருக்கலாம்.
• இந்திய ரங்கோலி-ஈர்க்கப்பட்ட லேஅவுட்கள்: பாரம்பரியமாக பண்டிகைகளின் போது தரையில் உருவாக்கப்படும் ரங்கோலி கலையால் ஈர்க்கப்பட்ட வண்ணமயமான மற்றும் சமச்சீரான லேஅவுட்களை உருவாக்கவும். இது தனிப்பயனாக்கக்கூடிய வண்ணங்கள் மற்றும் வடிவங்களுடன், கூறுகளை செறிவான வட்டங்கள் அல்லது பிற வடிவியல் வடிவங்களில் வரிசைப்படுத்த லேஅவுட் API ஐப் பயன்படுத்துவதை உள்ளடக்கியிருக்கலாம்.

முடிவுரை

CSS Houdini லேஅவுட் API என்பது வலை உருவாக்குநர்களுக்கு புதுமையான மற்றும் மிகவும் தனிப்பயனாக்கப்பட்ட லேஅவுட்களை உருவாக்க அதிகாரம் அளிக்கும் ஒரு சக்திவாய்ந்த கருவியாகும். உலாவி ஆதரவு இன்னும் வளர்ந்து வரும் நிலையில், லேஅவுட் API வலை வடிவமைப்பின் எதிர்காலம் பற்றிய ஒரு பார்வையை வழங்குகிறது. லேஅவுட் API-இன் அடிப்படைகளைப் புரிந்துகொண்டு வெவ்வேறு லேஅவுட் அல்காரிதங்களுடன் பரிசோதனை செய்வதன் மூலம், பார்வைக்கு பிரமிக்க வைக்கும் மற்றும் செயல்திறன் மிக்க வலை அனுபவங்களை உருவாக்குவதற்கான புதிய சாத்தியங்களைத் திறக்கலாம்.

இணையம் தொடர்ந்து வளரும்போது, லேஅவுட் API போன்ற கருவிகள் சாத்தியமானவற்றின் எல்லைகளைத் தள்ளுவதற்கு பெருகிய முறையில் முக்கியமானதாக மாறும். ஹுடினியின் சக்தியைத் தழுவி, தனிப்பயன் லேஅவுட் அல்காரிதம் மேம்பாட்டின் உற்சாகமான உலகத்தை ஆராயத் தொடங்குங்கள்!